<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 社保统计
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="date"  label="年份"></el-table-column>
				<el-table-column prop="pensionPaid" label="已缴费(养老)">
					<template slot-scope="scope">
						{{scope.row.pensionPaid||0}}
					</template>
				</el-table-column>
				<el-table-column prop="pensionNoPaid" label="未缴费(养老)">
					<template slot-scope="scope">
						{{scope.row.pensionNoPaid||0}}
					</template>
				</el-table-column>
				<el-table-column prop="pensionNum" label="已交人数(养老)"></el-table-column>
				<el-table-column prop="pensionNoNum" label="未交人数(养老)"></el-table-column>
				<el-table-column prop="pensionLv" label="缴费比例(养老)"></el-table-column>
				<el-table-column prop="medicalPaid" label="已缴费(医疗)">
					<template slot-scope="scope">
						{{scope.row.medicalPaid||0}}
					</template>
				</el-table-column>
				<el-table-column prop="medicalNoPaid" label="未缴费(医疗)">
					<template slot-scope="scope">
						{{scope.row.medicalNoPaid||0}}
					</template>
				</el-table-column>
				<el-table-column prop="medicalNum" label="已交人数(医疗)"></el-table-column>
				<el-table-column prop="medicalNoNum" label="未交人数(医疗)"></el-table-column>
				<el-table-column prop="medicalLv" label="缴费比例(医疗)"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="pageIndex"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="pagination"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PensionTotal',
    data() {
        return {
            tableData: [],
			pageIndex: 1,
			pageSize: 10,
			pageTotal: 0,
        };
    },
    created() {
		this.getData()
    },
    methods: {
        getData() {
			let t = this
			t.$apiPost('Pension/Totals', {page: this.pageIndex, size: this.pageSize}).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
        },     
		handleQuery () {
			this.pageIndex = 1
			this.getData()
		},
		pagination (e) {
			this.pageIndex = e
			this.getData()
		}
    }
};
</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 120px;
}
.handle-input {
    width: 200px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
